<template>
  <div class="h100 display-flex czbj dfddsrttre">
    <n-grid x-gap="12" :cols="2" class="kjnsewerw">
      <n-gi>
        <div class="bgff pd pt10 pm20 h100">
          <div class="title-label">行政区划({{ counta }})</div>
          <div class="jjnweerr">
            <div ref="echarDxa" class="w100 h100"></div>
          </div>
        </div>
      </n-gi>
      <n-gi>
        <div class="bgff pd pt10 pm20 pr20 h100">
          <div class="title-label">设备类型({{ countb }})</div>
          <div class="jjnweerr">
            <div ref="echarDxb" class="w100 h100"></div>
          </div>
        </div>
      </n-gi>
    </n-grid>

    <n-grid x-gap="12" :cols="3" class="mt10 kjnsewerw">
      <n-gi>
        <div class="bgff pd pt10 pm20 h100">
          <div class="title-label">项目进度({{ countc }})</div>
          <div class="jjnweerr">
            <div ref="echarDxc" class="w100 h100"></div>
          </div>
        </div>
      </n-gi>
      <n-gi>
        <div class="bgff pd pt10 pm20 pr20 h100">
          <div class="title-label">项目进度({{ countd }})</div>
          <div class="jjnweerr">
            <div ref="echarDxd" class="w100 h100"></div>
          </div>
        </div>
      </n-gi>
      <n-gi>
        <div class="bgff pd pt10 pm20 pr20 h100">
          <div class="title-label">场景类型({{ counte }})</div>
          <div class="jjnweerr">
            <div ref="echarDxe" class="w100 h100"></div>
          </div>
        </div>
      </n-gi>
    </n-grid>
  </div>
</template>
 <script lang='ts' setup>
import { ref, onMounted } from "vue";
import { dxget, transferTimeYMD, hf, dxpost, prefixS } from "../../util/index";
import { quyu } from "../../util/beRelieved/quyu";
const counta = ref();
const countb = ref();
const countc = ref();
const countd = ref();
const counte = ref();
const echarDxa = ref();
const echarDxb = ref();
const echarDxc = ref();
const echarDxd = ref();
const echarDxe = ref();
const getCs = async () => {
  const { data }: any = await dxget("beRelieved/typeOfSiteSoil");
  return data;
};

const getquyus = async () => {
  const { data }: any = await dxget("beRelieved/statistics");
  counta.value = data.count;
  return data.data;
};
const getquyusb = async () => {
  const { data }: any = await dxget(
    "beRelieved/statistics/equipmentinformation"
  );
  countb.value = data.count;
  return data.data;
};
const getquyusc = async () => {
  const { data }: any = await dxget("beRelieved/statistics/projectSchedulea");
  countc.value = data.count;
  return data.data;
};
const getquyusd = async () => {
  const { data }: any = await dxget("beRelieved/statistics/projectScheduleb");
  countd.value = data.count;
  return data.data;
};
const getquyuse = async () => {
  const { data }: any = await dxget("beRelieved/statistics/sceneType");
  counte.value = data.count;
  return data.data;
};
onMounted(async () => {
  var myCharta = window.echarts.init(echarDxa.value);
  var myChartb = window.echarts.init(echarDxb.value);
  var myChartc = window.echarts.init(echarDxc.value);
  var myChartd = window.echarts.init(echarDxd.value);
  var myCharte = window.echarts.init(echarDxe.value);
  const conshge = await getquyus();

  myCharta.setOption(hbjne("行政区划", conshge));
  myCharta.on("click", function (params) {
    hf("taskManagement", { district: params.data.label });
  });

  const jjbseb = await getquyusb();
  myChartb.setOption(hbjne("设备类型", jjbseb));
  myChartb.on("click", function (params) {
    hf("equipmentManagement", { type: params.data.label });
  });

  const jjbsec = await getquyusc();
  myChartc.setOption(hbjne("项目进度", jjbsec));
  myChartc.on("click", function (params) {
    hf("taskManagement", { state: params.data.label });
  });
  const jjbsed = await getquyusd();
  myChartd.setOption(hbjne("项目进度", jjbsed));
  myChartd.on("click", function (params) {
    hf("taskManagement", { state: params.data.label });
  });
  const jjbsee = await getquyuse();
  myCharte.setOption(hbjne("项目进度", jjbsee));
  myCharte.on("click", function (params) {
    hf("taskManagement", { typeOfSiteSoil: params.data.name });
  });
});

const hbjne = (name, conshge) => {
  return {
    legend: {
      bottom: "-0%",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    series: [
      {
        name: name,
        type: "pie",
        center: ["50%", "45%"],
        radius: ["40%", "60%"],
        data: conshge,
        label: {
          formatter: "{b} : {c} ({d}%)",
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
};
</script>
 <style scoped>
.kjnsewerw {
  height: 50%;

  overflow: hidden;
}
.jjnweerr {
  height: 85%;
  margin-top: 20px;
}
</style>